import { Button, Input, Comment, Tooltip, Avatar } from 'antd';
import React,{useState,createElement} from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { TagList } from '../../../../component/bankComponent/tag/tag';
import moment from 'moment';
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';

export const Solution = () => {
    const onSearch = (e)=>{
        console.log(e.target.value,"====");
    }


    const [likes, setLikes] = useState(0);
    const [dislikes, setDislikes] = useState(0);
    const [action, setAction] = useState(null);

    const like = () => {
        setLikes(1);
        setDislikes(0);
        setAction('liked');
    };

    const dislike = () => {
        setLikes(0);
        setDislikes(1);
        setAction('disliked');
    };

    const actions = [
        <Tooltip key="comment-basic-like" title="Like">
            <span onClick={like}>
                {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
                <span className="comment-action">{likes}</span>
            </span>
        </Tooltip>,
        <Tooltip key="comment-basic-dislike" title="Dislike">
            <span onClick={dislike}>
                {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
                <span className="comment-action">{dislikes}</span>
            </span>
        </Tooltip>,
        <span key="comment-basic-reply-to">Reply to</span>,
    ];
    return (
        <div>
            <div style={{display:"flex"}}>
                <Input placeholder="搜索解题"
                    prefix={<SearchOutlined />}
                    onPressEnter={onSearch}
                    style={{ flex:"1" }}
                />
                <Button type="link">排序</Button>
                <Button type="link">写题解</Button>
            </div>
            <div>
                <TagList />
            </div>
            <div>
                <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
                    content={
                        <p>
                            We supply a series of design principles, practical patterns and high quality design
                            resources (Sketch and Axure), to help people create their product prototypes beautifully
                            and efficiently.
                        </p>
                    }
                    datetime={
                        <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                            <span>{moment().fromNow()}</span>
                        </Tooltip>
                    }
                />

            </div>
        </div>
    )
}